<script setup lang="ts">
import BlockHead from './block-head.vue'
import img1 from './item-one-icon-1.png'

import img2 from './item-one-icon-2.png'
import img3 from './item-one-icon-3.png'
import img4 from './item-one-icon-4.png'
import ItemOneItem from './item-one-item.vue'

import type { BasicInfo } from '../type'

defineOptions({
  name: 'ItemOne',
})

defineProps<{
  data: BasicInfo
}>()
</script>

<template>
  <div class="w-full flex flex-auto flex-col">
    <BlockHead title="数据看板" />
    <div class="block-body h-48 w-full flex flex-auto flex-wrap overflow-auto">
      <ItemOneItem class="w-1/2" title="供应商（家）" :value="data.supplierNum" :img="img1" />
      <ItemOneItem class="w-1/2" title="采购单（家）" :value="data.orderInNum" :img="img2" />
      <ItemOneItem class="w-1/2" title="采购成本（元）" :value="data.orderInAmount" :img="img3" />
      <ItemOneItem class="w-1/2" title="客户数（个）" :value="data.customerNum" :img="img4" />
    </div>
  </div>
</template>
